<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>pctz</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    #yzbtn{
        position: absolute;
        right: 200px;
        top: 50px;
        z-index: 100;
    }
/*    #sticky{
        position: absolute;
        top: 0px;
    }
    #sticky{
        position: absolute;
        top: 0px;
    }*/
</style>

<body>

<button id="yzbtn" type="button" class="btn btn-primary" onclick="window.location='czgcPage.do'" >
    验证资料台账
</button>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>偏差台账
                </h1>
            </div>
        </div>


    </div>
    <div class="row clearfix">
        <div class="col-lg-12 column">

            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">查询条件</h3>
                </div>
                <div class="panel-body">
                    <div class="col-lg-6">
                        <label class="form-inline">偏差编号：
                            <input type="text" id="pnum1" class="form-control"/></label>
                    </div>
                    <div class="col-lg-6">
                        <label class="form-inline"/>偏差描述：
                        <input type="text" id="pdes1" class="form-control"/></label>
                    </div>
                    <div class="col-lg-6">
                        <label class="form-inline"/>偏差等级：
                        <input type="text" id="grade" class="form-control"/></label>
                    </div>
                    <div class="col-lg-6">
                        <label class="form-inline"/>物料来源：
                        <input type="text" id="source" class="form-control"/></label>
                    </div>
                    <div class="col-lg-12">
                        <label class="form-inline"/>物料编码/设备编码：
                        <input type="text" id="equipnum1" class="form-control"/></label>
                    </div>

                </div>
                <div class="panel-footer" align="center">
                    <button type="submit" class="btn btn-default" onclick="query()">查询</button>
                    <button type="submit" class="btn btn-default" data-toggle="modal" data-target="#myModal">新增</button>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">查询结果</h3>
                </div>
                <div class="table-responsive-xl" style=" overflow-y: auto; width:100%; height: 400px">
                    <table class="table  table-bordered text-nowrap" >
                        <thead >
                        <tr>
                            <th width="200px">
                                偏差编号
                            </th>
                            <th width="280px">
                                偏差发生时间
                            </th>
                            <th width="280px">
                                偏差来源
                            </th>
                            <th width="600px">
                                偏差种类
                            </th>
                            <th width="400px">
                                偏差报告单元
                            </th>
                            <th width="600px" >
                                偏差描述
                            </th>
                            <th width="300px">
                                设备/系统名称
                            </th>
                            <th width="400px">
                                产品/物料名称
                            </th>
                            <th width="400px">
                                产品/物料批号
                            </th>
                            <th width="600px">
                                物料编码/设备编号
                            </th>
                            <th width="600px">
                                偏差调查分析
                            </th>
                            <th width="600px">
                                偏差风险评估
                            </th>
                            <th width="600px">
                                偏差等级
                            </th>
                            <th width="600px">
                                纠正措施
                            </th>
                            <th width="600px">
                                CAPA
                            </th>
                            <th width="300px">
                                物料来源
                            </th>
                            <th width="150px">
                                备注（N/W）
                            </th>
                            <th width="600px">
                                归档人/归档时间
                            </th>
                        </tr>
                        </thead>
                        <tbody id="tableData">

                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    新增偏差信息
                </h4>
            </div>
            <div class="modal-body">
                <div class="input-group">
							<span class="input-group-addon" style="width: 110px;">
								<div class="dropdown">
									<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
                                            data-toggle="dropdown">偏差等级<span class="caret"></span></button>
									<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('轻微偏差')" tabindex="-1"
                                               href="#">轻微偏差</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('次要偏差')" tabindex="-1"
                                               href="#">次要偏差</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('重大偏差')" tabindex="-1"
                                               href="#">重大偏差</a>
										</li>

									</ul>
                                    </ul>
								</div>
							</span>
                    <input type="text" readonly="readonly" class="form-control" style="width: 450px;height: 48px"
                           placeholder="选择偏差等级" id="dclasses">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">偏差编号</span>
                    <input type="text" class="form-control" style="width: 450px" placeholder="输入偏差编号" id="pnum">
                </div>
                <br>


                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">偏差发生时间</span>
                    <input type="date" id="ptime" class="form-control" style="width: 450px" placeholder="输入偏差发生时间">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">偏差来源</span>
                    <input type="text" id="psource" class="form-control" style="width: 450px" placeholder="输入偏差来源">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">偏差种类</span>
                    <input type="text" id="pclass" class="form-control" style="width: 450px" placeholder="输入偏差种类">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">偏差报告单元</span>
                    <input type="text" id="punit" class="form-control" style="width: 450px" placeholder="输入偏差报告单元">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">偏差描述</span>
                    <input type="text" id="pdes" style="width: 450px" class="form-control" placeholder="输入偏差描述">
                </div>
                <br>

                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">设备/系统名称</span>
                    <input type="text" id="ename" style="width: 450px" class="form-control" placeholder="备/系统名称">
                </div>
                <br>

                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">产品/物料名称</span>
                    <input type="text" id="proname" style="width: 450px" class="form-control" placeholder="输入产品/物料名称">
                </div>
                <br>

                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">产品/物料批号</span>
                    <input type="text" id="pronum" style="width: 450px" class="form-control" placeholder="输入产品/物料批号">
                </div>
                <br>

                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">物料编码/设备编号</span>
                    <input type="text" id="equipnum" style="width: 440px" class="form-control" placeholder="输入物料编码/设备编号">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">偏差调查分析</span>
                    <input type="text" id="pana" style="width:450px" class="form-control" placeholder="输入偏差调查分析">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">偏差风险评估</span>
                    <input type="text" id="peva" style="width: 450px"
                           class="form-control" placeholder="输入风险评估">
                </div>
                <br>

                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">纠正措施</span>
                    <input type="text" id="change" style="width: 450px" class="form-control" placeholder="输入纠正措施">
                </div>
                <br>

                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">CAPA</span>
                    <input type="text" id="capa" style="width: 450px" class="form-control" placeholder="输入CAPA">
                </div>
                <br>

                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">物料来源</span>
                    <input type="text" id="wsource" style="width: 450px" class="form-control" placeholder="输入物料来源">
                </div>
                <br>


                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">备注（N/W）</span>
                    <input type="text" id="rem" style="width: 450px" class="form-control" placeholder="输入备注（N/W）">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 110px">归档人/归档时间</span>
                    <input type="text" id="people" style="width: 450px" class="form-control" placeholder="输入归档人/归档时间">
                </div>
                <br>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" id="btnSave" class="btn btn-primary" onclick="btnSave()">
                    提交保存
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script>
    $(function () { $("[data-toggle='tooltip']").tooltip(); });
    function btnSave() {
        let dclasses = $("#dclasses").val();
        let pnum = $("#pnum").val();
        let ptime = $("#ptime").val();
        let psource = $("#psource").val();
        let pclass = $("#pclass").val();
        let punit = $("#punit").val();
        let pdes = $("#pdes").val();
        let ename = $("#ename").val();
        let proname = $("#proname").val();
        let pronum = $("#pronum").val();
        let equipnum = $("#equipnum").val();
        let pana = $("#pana").val();
        let peva = $("#peva").val();
        let change = $("#change").val();
        let capa = $("#capa").val();
        let wsource = $("#wsource").val();
        let rem = $("#rem").val();
        let people = $("#people").val();
        if(ptime===null||ptime===undefined||ptime===''){
            alert("请输入偏差时间!")
            return;
        }
        $.ajax({
            url: "index.do",
            data: {
                grade: dclasses,//偏差等级
                pnum: pnum,//偏差编号
                ptime: ptime,//偏差时间
                psource: psource,//偏差来源
                pclass: pclass,//偏差种类
                punit: punit,//偏差报告单元
                pdes: pdes,//偏差描述
                ename:ename,//设备/系统名称
                proname:proname,//产品/物料名称
                pronum:pronum,//产品/物料批号
                equipnum:equipnum,//物料编码/设备编号
                pana:pana,//偏差调查分析
                peva:peva,//偏差风险评估
                change:change,//纠正措施
                capa:capa,//CAPA
                wsource:wsource,//物料来源
                rem:rem,//备注
                people:people//归档人/归档时间
            },
            type: "get",
            dataType: "text",
            success:function (data) {
                alert(data);
                location.reload();
            },
            error:function () {
                alert("网络错误 ！")
            }

        })
    }

    function query() {
        let pnum = $("#pnum1").val();
        let pdes = $("#pdes1").val();
        let equipnum = $("#equipnum1").val();
        let grade = $("#grade").val();
        let wsource = $("#source").val();
        $.ajax({
            url: "query.do",
            data: {
                pnum: pnum,
                pdes: pdes,
                equipnum: equipnum,
                grade: grade,
                wsource: wsource
            },
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data);
                let html = "";
                let i = 0;
                if(data.length===0){
                    alert("没有数据");
                }else {
                    for(i;i<data.length;i++){
                        html+="<tr class=\"warning\">" +
                            "<td data-toggle='tooltip'data-placement='right' title='偏差编号'>"+data[i].pnum+"</td>\n" +
                            "<td data-toggle='tooltip'data-placement='right' title='偏差发生时间'>"+data[i].ptime+"</td>\n" +
                            "<td data-toggle='tooltip'data-placement='right' title='偏差来源'>"+data[i].psource+"</td>\n" +
                            "<td data-toggle='tooltip'data-placement='right' title='偏差种类'>"+data[i].pclass+"</td>\n" +
                            "<td data-toggle='tooltip'data-placement='right' title='偏差报告单元'>"+data[i].punit+"</td>\n" +
                            "<td data-toggle='tooltip'data-placement='right' title='偏差描述'>"+data[i].pdes+"</td>\n" +
                            "<td data-toggle='tooltip'data-placement='right' title='设备/系统名称'>"+data[i].ename+"</td>\n" +
                            "<td data-toggle='tooltip'data-placement='right' title='产品/物料名称'>"+data[i].proname+"</td>\n" +
                            "<td data-toggle='tooltip'data-placement='right' title='产品/物料批号'>"+data[i].pronum+"</td>\n" +
                            "<td data-toggle='tooltip'data-placement='right' title='物料编码/设备编号'>"+data[i].equipnum+"</td>\n" +
                            "<td data-toggle='tooltip'data-placement='right' title='偏差调查分析'>"+data[i].pana+"</td>\n" +
                            "<td data-toggle='tooltip'data-placement='right' title='偏差风险评估'>"+data[i].peva+"</td>\n" +
                            "<td data-toggle='tooltip'data-placement='right' title='偏差等级'>"+data[i].grade+"</td>\n" +
                            "<td data-toggle='tooltip'data-placement='right' title='纠正措施'>"+data[i].change+"</td>\n" +
                            "<td data-toggle='tooltip'data-placement='right' title='CAPA'>"+data[i].capa+"</td>\n" +
                            "<td data-toggle='tooltip'data-placement='right' title='物料来源'>"+data[i].wsource+"</td>\n" +
                            "<td data-toggle='tooltip'data-placement='right' title='备注（N/W）'>"+data[i].rem+"</td>\n"+
                            "<td data-toggle='tooltip'data-placement='right' title='归档人/归档时间'>"+data[i].people+"</td></tr>"
                    }
                }
                $("#tableData").html(html);
                // $("[data-toggle='tooltip']").tooltip();

            },
            error: function () {
                alert("网络错误 ！")
            }
        })//是这个项目吗是的
    }

    //修改药品类别新增的时候
    function alterAclasses(oo) {
        $("#dclasses").val(oo);
    }
</script>
</body>
</html>
